<template>
  <div class="main">
    <div class="header">
      <div class="header-center">
        <div class="header-title">
          管理员登录
        </div>
        <div class="header-img"></div>
      </div>
      <div class="header-bottom"></div>
    </div>
    <div class="content">
      <div class="content-left"></div>
      <div class="content-right">
        <div class="right-form">
          <div class="right-text">
            <label>
              <input v-model="username" type="text" placeholder="请输入用户名" maxlength="12" autocomplete="off">
            </label>
          </div>
          <div class="right-text">
            <label>
              <input v-model="password" type="password" placeholder="请输入密码" autocomplete="off">
            </label>
          </div>
          <div class="right-button">
            <button class="login-button" @click="tryToLogin">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {login} from "@/http/api/admin"
import response from "@/http/response";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    async tryToLogin() {
      let result = await login({
        username: this.username,
        password: this.password,
      })
      switch (result.code) {
        case response.success:
          await this.$router.push({path: '/admin/manager'})
          break
        case response.paramLack:
          // 参数缺失
          this.$message({
            message: result.message,
            type: 'warning'
          })
          break
        case response.accountErr:
          // 用户名或密码错误
          this.$message({
            message: result.message,
            type: 'warning'
          })
          break
        default:
          this.$message.error('未知错误')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  background: url("../../assets/images/admin/login/background.jpg") no-repeat;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: 120px;

    .header-center {
      width: 80%;
      height: 80px;
      position: relative;
      margin: 0 auto;

      .header-title {
        text-align: center;
        color: #ffffff;
        font-size: 20px;
        text-shadow: 0 0 5px #00d8ff; // 添加阴影：参数（水平阴影的位置，垂直阴影的位置，模糊的距离，阴影的颜色）
        line-height: 300%; // 行高
      }

      .header-img {
        background: url("../../assets/images/admin/login/head.gif") no-repeat center center;
        background-size: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 30px;
      }
    }
  }

  .content {
    width: 65%;
    height: 65%;
    margin: 0 auto 0 auto;

    .content-left {
      width: 48%;
      height: 90%;
      background: url("../../assets/images/admin/login/globe.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      float: left;
      -webkit-transform: rotate(360deg);
      animation: rotation 15s linear infinite;
      -moz-animation: rotation 15s linear infinite;
      -webkit-animation: rotation 15s linear infinite;
      -o-animation: rotation 15s linear infinite;
    }

    .content-right {
      width: 45%;
      height: 90%;
      background: url("../../assets/images/admin/login/form.png") no-repeat;
      background-size: 100% 100%;
      float: right;
      position: relative;

      .right-form {
        width: 100%;
        height: 80%;
        margin: auto auto;
        vertical-align: center;
        position: absolute;
        top: 30%;
        left: 10%;

        .right-text {
          background: url("../../assets/images/admin/login/input.png") no-repeat;
          width: 80%;
          height: 30px;
          background-size: 100% 100%;
          margin-bottom: 30px;
          position: relative;

          input {
            width: 85%;
            border: none;
            box-sizing: border-box;
            height: 30px;
            margin-left: 20px;
            background: none;
            color: #00eaff;
            padding-left: 10px;
            outline: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            position: absolute;
          }
        }

        .right-button {
          background: url("../../assets/images/admin/login/button.png") no-repeat;
          width: 80%;
          height: 30px;
          background-size: 100% 100%;
          line-height: 30px;
          position: relative;

          .login-button {
            width: 95%;
            border: none;
            box-sizing: border-box;
            height: 30px;
            cursor: pointer; // 光标呈现为指示链接的指针（一只手）
            background: none;
            outline: none; // 选中时不会出现虚框
            color: #fff;
            position: absolute;
          }
        }
      }
    }
  }
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

input::-webkit-input-placeholder {
  color: #ccc;
}

</style>